<!--首页 -->
<template>
  <div class="home">
    <!-- 准备二级路由坑 -->
    <router-view v-if="$route.path == '/home/searchpop'"></router-view>
    <div v-else>
      <!-- 搜索栏 -->
      <van-search
        shape="round"
        v-model="value"
        placeholder="请输入搜索关键词"
        @click="gotosearch"
      />
      <!-- 轮播图 -->
      <Swiper :bannerArr="bannerArr"></Swiper>
      <!--图标导航 -->
      <Grid :channelArr="channelArr"></Grid>
      <!-- 品牌制造商直供-->
      <ProductList :brandList="brandList"></ProductList>
      <!--专题精选 -->
      <van-swipe :loop="false" :width="300">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>

<script>
// 引入首页的请求
import { getIndexList } from "@/utils/https";
// 引入轮播图组件
import Swiper from "@/components/Swiper";
// 引入图标导航组件
import Grid from "@/components/Grid";
// 引入品牌制造商直供 组件
import ProductList from "@/components/ProductList";
export default {
  components: {
    Swiper,
    Grid,
    ProductList,
  },
  data() {
    return {
      value: "",
      bannerArr: [], // 轮播图数据
      channelArr: [], // 图标导航数组
      brandList: [], // 品牌制造商直供数组
    };
  },
  created() {
    getIndexList().then((res) => {
      this.bannerArr = res.data.data.banner;
      this.channelArr = res.data.data.channel;
      this.brandList = res.data.data.brandList;
    });
  },
  methods: {
    gotosearch() {
      this.$router.push("/home/searchpop");
      //   console.log(this.$route); // 获取当前路由对象
    },
  },
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.home {
  padding-bottom: 50px;
  box-sizing: border-box;
}
</style>